<template>
  <div>
    <a-layout-content class="page_set">
      <header class="flex-center-between">
        <div class="l_title">
          <!-- 日期 -->
          <a-month-picker placeholder="选择日期" @change="selectJoinDate" />
          <!-- 筛选 -->
          <a-popover trigger="click" placement="bottomLeft">
            <template slot="content">
              <!-- 选择人员 -->
              <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" label="选择人员" style="width: 350px">
                <a-select-option v-model="querySearch.empId" allow-clear style="width: 100%">
                  <a-select-option v-for="item in userList" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select-option>
              </a-form-item>
              <!-- 选择部门 -->
              <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" label="选择部门" style="width: 350px">
                <a-tree-select
                  v-model="querySearch.depId"
                  allow-clear
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="depList"
                  placeholder="选择部门"
                  tree-default-expand-all
                >
                  <span slot="title" slot-scope="key, value">
                    {{ value }}
                  </span>
                </a-tree-select>
              </a-form-item>
              <!-- 发送状态 -->
              <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" label="发送状态" style="width: 350px">
                <a-select v-model="querySearch.sendStatus" allow-clear style="width: 100%">
                  <a-select-option value="true"> 已发送 </a-select-option>
                  <a-select-option value="false"> 未发送 </a-select-option>
                </a-select>
              </a-form-item>
              <!-- 查看状态 -->
              <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" label="查看状态" style="width: 350px">
                <a-select v-model="querySearch.readStatus" allow-clear style="width: 100%">
                  <a-select-option value="true"> 已查看 </a-select-option>
                  <a-select-option value="false"> 未查看 </a-select-option>
                </a-select>
              </a-form-item>
              <!-- 确认状态 -->
              <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" label="确认状态" style="width: 350px">
                <a-select v-model="querySearch.checkStatus" allow-clear style="width: 100%">
                  <a-select-option value="true"> 已确认 </a-select-option>
                  <a-select-option value="false"> 未确认 </a-select-option>
                </a-select>
              </a-form-item>
            </template>
            <template slot="title">
              <span>筛选</span>
            </template>
            <a-button>筛选</a-button>
          </a-popover>
          <!-- 查询 -->
          <a-input-search style="width: 180px" icon="search" @search="onSearch" />
        </div>
        <div>
          <a-popover trigger="click" placement="leftTop">
            <template slot="content">
              <a-row> <a-button class="tc-theme" type="link" @click.stop="start()">全部发送</a-button></a-row>
              <a-row> <a-button class="tc-theme" type="link" @click.stop="start()">定时发送</a-button></a-row>
            </template>
            <a-button class="btn_bag mg_r10" type="link">发送</a-button>
          </a-popover>

          <a-button @click="exportList">导出明细</a-button>
        </div>
      </header>
      <div class="payroll_main">
        <a-table :data-source="data" :row-key="(data) => data.id">
          <a-table-column key="name" title="姓名" data-index="name" />
          <a-table-column title="员工状态">
            <template slot-scope="text">
              <a-tag v-if="text.employeeStatus == '1'" color="pink"> 待入职 </a-tag>
              <a-tag v-if="text.employeeStatus == '2'" color="red">入职</a-tag>
              <a-tag v-if="text.employeeStatus == '3'" color="#6A66F6"> 待离职 </a-tag>
              <a-tag v-if="text.employeeStatus == '4'" color="green"> 离职 </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="实发工资">
            <template slot-scope="text">{{ text.salaryReal }}</template>
          </a-table-column>
          <a-table-column title="发送状态">
            <template slot-scope="text">
              <a-tag v-if="text.sendStatus" color="#6A66F6">已确认</a-tag>
              <a-tag v-else color="green">未确认</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="确认状态">
            <template slot-scope="text">
              <a-tag v-if="text.checkStatus" color="#6A66F6">已确认</a-tag>
              <a-tag v-else color="green">未确认</a-tag>
            </template>
          </a-table-column>
          <a-table-column key="action" title="操作">
            <template slot-scope="text, record">
              <span>
                <a-button class="tc-theme" type="link" @click.stop="start(text)"> 发送 </a-button>
                <a-divider type="vertical" />
                <a-button class="tc-theme" type="link" @click.stop="editor(record)"> 编辑 </a-button>
              </span>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </a-layout-content>
    <editor-payroll :show.sync="showPayroll" :payroll-options.sync="payrollOptions" @editor="editroPayroll($event)" />
  </div>
</template>

<script>
import { Wages, Payroll, Common } from "@/api/wages";

import { mapState } from "vuex";
export default {
  inject: ["reload"],
  name: "Payroll",
  components: {
    editorPayroll: () => import("../common/eidtor_payroll")
  },

  data() {
    return {
      showPayroll: false,
      depList: [],
      querySearch: {
        year: null,
        month: null
      },
      userList: null,
      data: [],
      payrollOptions: {}
    };
  },
  computed: {
    ...mapState(["hr"])
  },
  watch: {
    querySearch: {
      handler(val) {
        Wages({ url: Payroll.payrollQueryList, params: this.querySearch }).then(({ data }) => {
          data.entities.forEach((da) => {
            const keys = [
              "absenteeismDed",
              "businessCommission",
              "lateDed",
              "leaveDed",
              "overallDed",
              "overtimePay",
              "salaryBasic",
              "salaryReal",
              "supplementDed",
              "teamCommission",
              "subsidy"
            ];
            keys.map((key, i) => {
              da[key] /= 100;
            });
          });
          this.data = data.entities;
        });
      },
      deep: true
    }
  },
  created() {
    this.getPayrollList();
    /* 筛选选择人员 */
    this.getUserList();
    /* 部门列表 */
    this.getDepList();
  },

  methods: {
    /* 获取部们列表 */
    getDepList() {
      Wages({
        url: Common.depList,
        params: { companyId: this.$store.state.hr.companyId }
      }).then(({ data }) => {
        this.depList = this.deepLoop(data[0].depChildList);
      });
    },
    /* 处理部门需要色数据 */
    deepLoop(data) {
      const needData = [...data];
      const d = [];
      needData.map((val) => {
        const { name: title, id: key, id: value, depChildList: children } = val;
        val.title = title;
        val.value = value;
        val.key = key;
        val.children = children;
        if (val.depChildList) {
          this.deepLoop(val.depChildList);
        }
        d.push(val);
      });
      return d;
    },
    /* 导出明细 */
    exportList() {
      Wages({ url: Payroll.exportList }).then((data) => {});
      /*  this.exportExcel(this.data, '工资单') */
    },
    /* 编辑工资条 */
    editroPayroll(data) {
      const keys = [
        "absenteeismDed",
        "businessCommission",
        "lateDed",
        "leaveDed",
        "overallDed",
        "overtimePay",
        "salaryBasic",
        "salaryReal",
        "supplementDed",
        "teamCommission",
        "subsidy"
      ];
      keys.map((key, i) => {
        data[key] *= 100;
      });
      Wages({
        url: Payroll.editorPayroll,
        params: {
          companyId: this.hr.companyId
        },
        method: "PUT",
        data
      }).then((data) => {
        data.success ? this.$notification["success"]({ message: "保存成功" }) : null;
      });
    },
    /* 获取员工列表 */
    getUserList() {
      Wages({
        url: Common.userList,
        params: { companyId: this.$store.state.hr.companyId }
      }).then(({ data }) => {
        this.userList = data;
      });
    },
    /* 获取工资单列表 */
    getPayrollList() {
      Wages({
        url: Payroll.payrollList,
        params: {
          companyId: this.hr.companyId
        }
      }).then(({ data }) => {
        const keys = [
          "absenteeismDed",
          "businessCommission",
          "lateDed",
          "leaveDed",
          "overallDed",
          "overtimePay",
          "salaryBasic",
          "salaryReal",
          "supplementDed",
          "teamCommission",
          "subsidy"
        ];
        data.entities.forEach((d, i) => {
          keys.map((key) => {
            d[key] = d[key] / 100;
          });
        });
        this.data = data.entities;
      });
    },
    // 搜索
    onSearch(value) {},
    // 日期筛选
    selectJoinDate(e, str) {
      this.querySearch.year = str.split("-")[0];
      this.querySearch.month = str.split("-")[1];
    },
    // 发送
    start(e) {},
    // 编辑
    editor(e) {
      this.showPayroll = true;
      this.payrollOptions = e;
    },
    // 选择人员
    handleSelectChange(value) {}
  }
};
</script>
